<template>
    <div class="app-container" id="pay"></div>
</template>

<script>
import * as echarts from "echarts";
export default {
    data() {
        return {
            // 电费
            payData: [],
            queryInfo: {
                c_id: 7,
                currPage: 0,
                pageNum: 4,
            },
            //水费月单
            payDataWaterM: [],
            queryInfoWaterM: {
                c_id: 8,
                currPage: 0,
                pageNum: 4,
            },
            //水费单
            payDataWater: [],
            queryInfoWater: {
                c_id: 9,
                currPage: 0,
                pageNum: 4,
            },
            //天然费单
            payDataSky: [],
            queryInfoSky: {
                c_id: 9,
                currPage: 0,
                pageNum: 4,
            },
            //物业费单
            payDataWY: [],
            queryInfoWY: {
                c_id: 9,
                currPage: 0,
                pageNum: 4,
            },
            //宽带费单
            payDataKD: [],
            queryInfoKD: {
                c_id: 9,
                currPage: 0,
                pageNum: 4,
            },
        };
    },
    mounted() {
        this.getEchartsData();
    },
    methods: {
        async getEchartsData() {
            let res = await this.$axios({
                url: "/cost/getCostData",
                methods: "get",
                params: this.queryInfo,
            });
            this.payData = res.data.total;

            let resWM = await this.$axios({
                url: "/cost/getCostData",
                methods: "get",
                params: this.queryInfoWaterM,
            });
            this.payDataWaterM = resWM.data.total;

            let resW = await this.$axios({
                url: "/cost/getCostData",
                methods: "get",
                params: this.queryInfoWater,
            });
            this.payDataWater = resW.data.total;

            let resS = await this.$axios({
                url: "/cost/getCostData",
                methods: "get",
                params: this.queryInfoSky,
            });
            this.payDataSky = resS.data.total;

            let resWY = await this.$axios({
                url: "/cost/getCostData",
                methods: "get",
                params: this.queryInfoWY,
            });
            this.payDataWY = resWY.data.total;

            let resKD = await this.$axios({
                url: "/cost/getCostData",
                methods: "get",
                params: this.queryInfoKD,
            });
            this.payDataKD = resKD.data.total;
            // 绘制图表
            this.echartsInit();
        },
        echartsInit() {
            echarts.init(document.getElementById("pay")).setOption({
                title: {
                    text: "缴费订单项目",
                    left: "right",
                },
                legend: {
                    data: ["计费项目"],
                    left: "",
                },
                radar: {
                    indicator: [
                        { name: "电费表", max: 12 },
                        { name: "水费固定月单", max: 12 },
                        { name: "水费按量单", max: 12 },
                        { name: "天然气单", max: 12 },
                        { name: "物业费单", max: 12 },
                        { name: "宽带费单", max: 12 },
                    ],
                    splitArea: {
                        areaStyle: {
                            // 图表背景网格区域的颜色
                            color: ["rgb(255, 238, 243)"],
                        },
                    },
                },
                series: [
                    {
                        name: "计费项目",
                        type: "radar",
                        data: [
                            {
                                value: [
                                    this.payData,
                                    this.payDataWaterM,
                                    this.payDataWater,
                                    this.payDataSky,
                                    this.payDataWY,
                                    this.payDataKD,
                                ],
                                name: "计费项目",
                            },
                        ],
                        itemStyle: {
                            //上方显示数值
                            normal: {
                                label: {
                                    show: true, //开启显示
                                    position: "top", //在上方显示
                                    textStyle: {
                                        //数值样式
                                        color: "rgb(16, 158, 255)",
                                        fontSize: 14,
                                    },
                                },
                            },
                        },
                        color: ["rgb(16, 158, 255)"],
                        areaStyle: {
                            color: "rgb(16, 158, 255)",
                            opacity: 0.8,
                        },
                        lineStyle: {
                            normal: {
                                color: "rgb(16, 158, 255)",
                            },
                        },
                    },
                ],
            }); 
        },
    },
};
</script>

<style lang="scss" scoped>
.app-container::v-deep {
    //   padding: 20px;
    width: 100%;
    height: 350px;
}
</style>
